<template>
    <div class="app-content" v-if="!$util.isEmpty(detailData)">
        <task-list type="desc" :data="detailData" />
        <!-- <van-tabs @change="changeActive" v-model="active" color="#FFD11A" :line-width="30">
            <van-tab v-for="(item,index) in statusOptions" :title="item" :key="index" />
        </van-tabs> -->
		<div class="tab">
			<div class="item" :class="{on: active === index}" v-for="(item,index) in statusOptions" :key="index" @click="switchTab(index)">{{item}}</div>
		</div>
        <div class="list" :class="{hasList: !$util.isEmpty(list.data)}">
			<template v-if="!$util.isEmpty(list.data)">
				<div v-for="(item,index) in list.data" :key="index" class="detail-box">
					<div class="detail-list_box">
						<img :src="item.user_picture" alt />
						<div class="detail-right">
							<h3>{{ item.name || '暂无' }}</h3>
							<div class="dec">{{ item.phone || '暂无' }}</div>
							<div class="dec">人分享{{ item.share_num }}，浏览次数 {{ item.browse_number }}，获客{{ item.count_user }}</div>
						</div>
					</div>
				</div>
			</template>
			<app-wrapper-empty v-else title="暂无数据内容" :is-empty="$util.isEmpty(list.data)" />
        </div>
        <div class="footer" v-if="detailData.type == 4">
            <div class="option_btn"  v-if="detailData.recommend" @click="copy(detailData.recommend)">复制内容</div>
            <div class="option_btn" v-if="!$util.isEmpty(detailData.content.imglist)" @click.stop="downloadPoster(detailData.content.imglist)">下载图片</div>
            <div class="option_btn" v-if="detailData.content.link" @click="copy(detailData.content.link)">复制链接</div>
        </div>
        <div class="footer" v-else>
            <div class="app-button option_btn" @click="share(detailData)">生成分享海报</div>
        </div>
        <share-poster ref="sharePoster" :type="shareType" />
    </div>
</template>

<script>

import { mapGetters } from 'vuex'
import taskList from './components/taskList'
import AppWrapperEmpty from '@/components/App_wrapper_empty'
import { list } from '@/mixins'
import { getTaskDetail, getTaskDetailList, confirmTask } from '@/api/getGuest'
import sharePoster from '@/pages/components/sharePoster'

export default {
	name: 'TaskDetail',
	mixins: [list],
	components: {
		taskList,
		AppWrapperEmpty,
		sharePoster
	},
	watch: {
		active() {
			this.resetList()
			this.init()
		}
	},
	computed: {
		...mapGetters(['getUser'])
	},
	data() {
		return {
			active: 0,
			statusOptions: ['已完成(0)', '未完成(0)'],
			detailData: {},
			shareType: 8,
			option: {}
		}
	},
	onLoad(option) {
		this.option = option
		this.getTaskDetail()
		this.init()
	},
	onPullDownRefresh() {
		this.resetList()
		this.init().then(res => {
			uni.stopPullDownRefresh()
		})
	},
	onReachBottom() {
		if (this.list.finished) {
			uni.showToast({
				title: '没有更多了',
				icon: 'none'
			})
			return
		}
		if (this.list.loading) {
			return
		}
		this.init()
	},
	methods: {
		init() {
			this.list.loading = true
			return getTaskDetailList({
				page: this.list.page,
				limit: this.list.limit,
				work_id: this.option.work_id,
				status: this.active === 0 ? 1 : 0
			}).then(res => {
				this.statusOptions = this.statusOptions.map((i, idx) => {
					if (idx === 0) {
						return `已完成(${res.data.count_finished})`
					}
					return `未完成(${res.data.count_unfinished})`
				})
				this.completes(res)
			})
		},
		switchTab(index) {
			this.active = index
		},
		share(data) {
			// eslint-disable-next-line no-nested-ternary
			this.shareType = data.type === 1 ? 3 : data.type === 2 ? 2 : 10
			this.$nextTick(() => {
				this.$refs.sharePoster.showMask(
					{
						id: data.content.id,
						url: true,
						work_id: data.work_id,
						urlString: `&work_id=${data.work_id}&share_user_id=${this.getUser.user_id}`
					},
					true
				)
			})
		},
		getTaskDetail() {
			getTaskDetail({
				work_id: this.option.work_id
			}).then(res => {
				this.detailData = res.data
			})
		},
		copy(text) {
			// 复制
			uni.setClipboardData({
				data: text,
				success: () => {
					uni.showToast({
						title: '复制成功',
						icon: 'success'
					})
				},
				fail: () => {
					uni.showToast({
						title: '复制失败',
						icon: 'none'
					})
				}
			})
			confirmTask({ work_id: this.detailData.work_id })
		},
		// 预览图片
		downloadPoster(item) {
			uni.previewImage({
				urls: item
			})
		}
	}
}
</script>
<style lang="scss" scoped>
.tab {
	display: flex;
	position: fixed;
	width: 100%;
	top: 430px;
	left: 0;
	right: 0;
	background-color: #fff;
	z-index: 999;
	border-bottom:0.5px solid rgba(238,238,238,1);
	.item {
		flex: 1 1 auto;
		text-align: center;
		height: 90px;
		line-height: 90px;
		font-size:26px;
		color:rgba(153,153,153,1);
		position: relative;
		&.on {
			font-weight:600;
			color:rgba(51,51,51,1);
			&::before {
				position: absolute;
				bottom: 0;
				left: 50%;
				margin-left: -30px;
				content: '';
				width:60px;
				height:6px;
				background:rgba(255,209,26,1);
				border-radius:3px;
			}
		}
	}
}
.footer {
	width: 100%;
	height:90px;
	// background-color: #ffffff;
	// box-shadow: 0px -3px 10px 0px rgba(0, 0, 0, 0.1);
display: flex;
justify-content: center;
	.option_btn {
		width:100%;
		height:90px;
		line-height:90px;
		font-size: 24px;
		text-align:center;
		text-align: center;
		position: fixed;
		bottom: 0;
		justify-content: center;
		& + .option_btn {
		margin-left: 20px;
		}
		&.app-button {
		background-color: #ffd11a;
		}
	}

	& > button {
		margin-left: 20px;
	}
}
.list {
    padding-bottom: 100px;
	&.hasList {
		margin-top: 100px;
	}
    & .detail-box {
        padding-left: 30px;
        background-color: #ffffff;
		border-bottom: 0.5px solid #dddddd;
        & .detail-list_box {
            display: flex;
            align-items: center;
			justify-content: center;
            & > img {
                width: 80px;
                height: 80px;
                border-radius: 50%;
            }
            .detail-right {
                flex: 1;
                padding: 30px 20px;
				margin-left: 22px;
                & > h3 {
                    color: #333333;
                    font-weight: 400;
                    font-size: 26px;
                }
                & .dec {
                    color: #666666;
                    font-size: 24px;
					font-weight: 400;
					margin-top: 8px;
                    &:nth-of-type(1) {
                        margin: 20px 0 17px;
                    }
                }
            }
        }
    }
}
</style>
